<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>picture</title>
    <th:block th:include="base::header"/>
    <style>
        #card a{
            cursor: pointer;
            font-size: 16px;
            line-height: 20px;
            height: 20px;
            display: block;
        }
        #card a:hover{
            color: #00FFFF;
        }
    </style>
</head>
<body>
<!--<table >
    <tr >
        <td th:each="item:${images}"><img th:src="@{${item}}"></td>
    </tr>
</table>-->
<div class="layui-bg-gray" style="padding: 30px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-card">
            <div id="head" class="layui-card-header">
                <button id="edit" onclick="startEdit()" class="layui-btn">编辑</button>
            </div>
            <div class="layui-card-body layui-container">
                <div class="layui-row" id="card">

                </div>
            </div>
        </div>
        <a href="" id="load" style="display: none"></a>
    </div>
</div>
<input id="upload" type="file" multiple="multiple" style="display: none" onchange="upload(this)">
</body>
<script type="text/javascript" th:inline="javascript">

    var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
    var id=[[${id}]];
    var data=[];
    var editable=false;
    var selectedFile=[];
    var time = 500;
    var timeOut  = null;

    $(function () {
        getFile();
    });
    function getFile() {
        $.ajax({
            url:basePath+"/order/getfile",
            data:{'id':id},
            type:"GET",
            dataType:"json",
            success:function (res) {
                console.log(res);
                loadFile(res);
                data=res;
            }
        });
    }

    function loadFile(data) {
        $("#card").empty();
        $.each(data,function(index, item) {
            var title=item.substring(item.lastIndexOf("/")+1);
            var inner=$("<a id='file' href=''></a>").append(title).attr('href',basePath+item).attr('name',basePath+item);
            inner.click(function () {
                selected(inner[0]);
            });
            /*inner.click(function () {
                clearTimeout(timeOut); // 清除第一个单击事件
                timeOut= setTimeout(function () {
                    console.log(inner[0]);
                    selected(inner[0]);
                }, time);
            });
            inner.dblclick(function () {
                clearTimeout(timeOut); // 清除第一个单击事件
                timeOut= setTimeout(function () {
                    open(inner);
                }, time);
            })*/
            $("#card").append(inner);
        });
    }

    function startEdit() {
        editable=true;
        $("a").attr('href','javascript:void(0)');
        $("#head").empty();
        var add=$("<button id='add' onclick='add()' class='layui-btn'>添加</button>");
        var del=$("<button id='delete' onclick='del()' class='layui-btn'>删除</button>");
        var done=$("<button id='done' onclick='done()' class='layui-btn'>完成</button>");
        $("#head").append(add).append(del).append(done);
    }
    function add(){
        $("#upload").click();
    }
    function del() {
        var r=confirm('确定删除');
        if (r==true){
            $.each(selectedFile,function (index,item) {
                if (data.includes(item)){
                    data.splice(data.indexOf(item),1);
                }
            })
            var names=data.join();
            $.ajax({
                url:basePath+"/order/deletefile",
                data:{'data':names,'id':id},
                type: 'POST',
                dataType:'json',
                success:function (res) {
                    alert('删除成功');
                }
            });
            console.log(data);
        }
        loadFile(data);
        selectedFile=[];
    }
    function upload(obj) {
        console.log($(obj));
        var files=$(obj).prop('files');
        if (files.length==0){
            alert('请选择文件');
            return;
        }else{
            var formData=new FormData();
            $.each(files,function (index,item) {
                formData.append('files',item,item.name);
            })
            formData.append('id',id);
            console.log(formData.get('files'));
            $.ajax({
                url: basePath+"/order/uploadfile",
                type: "POST",
                data: formData,
                // 告诉jQuery不要去设置Content-Type请求头
                contentType: false,
                // 告诉jQuery不要去处理发送的数据
                processData: false,
                success(res) {
                    console.log(res);
                    alert(res.msg);
                    getFile();
                }
            });
        }
    }
    function done() {
        location.reload();
    }

    function selected(obj) {
        //console.log(obj);
        var c=$(obj).attr('class');
        var src=$(obj).attr('name').substring(21);
        if (editable==false){
            $(obj).attr('class','layui-bg-blue');
            $(obj).attr('class','');
        }else{
            if (c==''){
                $(obj).attr('class','layui-bg-blue');
                selectedFile.push(src);
            }else{
                $(obj).attr('class','');
                if (selectedFile.includes(src)){
                    delete selectedFile[selectedFile.indexOf(src)];
                }
            }
            console.log(selectedFile);
        }
    }

</script>
</html>